/*!
 * @author [siwi]
 * @email [siwi@siwi.me]
 * @create date 2017-05-11 11:41:20
 * @modify date 2017-05-11 11:41:20
 * @desc [siwi ui]
*/

@import "base/normalize";
@import "base/variables";
@import "mixins/mixins";

/****************     grid     ****************/

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: @html-font-size;
    line-height: @line-height-base;
}

body {
    margin: 0;
}


/****************     grid     ****************/

.@{row-prefix} {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 1px;
    &::before,
    &::after {
        display: flex;
    }
    .clearfix();
}

.@{row-prefix}-oneline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    &::before,
    &::after {
        display: flex;
    }
    .clearfix();
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.justify-content {
    &-center {
        justify-content: center;
    }
    &-flex-start {
        justify-content: flex-start;
    }
    &-flex-end {
        justify-content: flex-end;
    }
    &-space-around {
        justify-content: space-around;
    }
    &-space-between {
        justify-content: space-between;
    }
}

.align-items {
    &-center {
        align-items: center;
    }
    &-flex-start {
        align-items: flex-start;
    }
    &-flex-end {
        align-items: flex-end;
    }
    &-stretch {
        align-items: stretch;
    }
    &-baseline {
        align-items: baseline;
    }
}

.align-content {
    &-flex-start {
        align-content: flex-start;
    }
    &-flex-end {
        align-content: flex-end;
    }
    &-center {
        align-content: center;
    }
    &-space-between {
        align-content: space-between;
    }
    &-space-around {
        align-content: space-around;
    }
    &-stretch {
        align-content: stretch;
    }
}

// columns
.make-column(@grid-columns);
// xs < 798
@media screen and (max-width: @screen-xs) {
    .container {
        width: 100%;
    }
    .make-column(@grid-columns, @grid-size-xs);
}

// sm 789 < 992
@media (min-width: (@screen-xs + 1)) and (max-width: @screen-sm) {
    .make-grid(@screen-xs);
    .make-column(@grid-columns, @grid-size-sm);
}

// md
@media (min-width: (@screen-sm + 1)) and (max-width: @screen-md) {
    .make-grid(@screen-sm);
    .make-column(@grid-columns, @grid-size-md);
}

// lg 1200 - 1920
@media (min-width: @screen-md) {
    .make-grid(@screen-md);
    .make-column(@grid-columns, @grid-size-lg);
}